<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客发布</title>
  <!-- 引入semantic-ui的css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" th:href="@{/css/me.css}">
  <!-- 引入动画的css -->
  <link rel="stylesheet" th:href="@{/css/animate.css}">
  <!-- 引入editormd的css -->
  <link rel="stylesheet" th:href="@{/lib/editormd/css/editormd.min.css}">
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <link rel="shortcut icon" th:href="@{/images/logo.png}" type="image/x-icon">
</head>

<body>
  <!-- 导航 -->

  <nav th:replace="_fragments :: menu(5)"></nav>

  <!-- 中间部分 -->
  <div class="m-container-large m-padded-td-big ">
    <!-- ui container：可以切换多端 -->
    <div class="ui container">
      <form id="blog-form" th:action="@{/blog/saveBlog}" method="post" class="ui form">
        <input type="hidden" id="status" name="status" th:value="${blogDetail.status}">
        <input type="hidden" name="id" th:value="${blogDetail.id}">
        <!-- 类型+标题 -->
        <div class="required field">
          <div class="ui left labeled input">
            <div class="ui selection compact teal basic  dropdown label">
              <input type="hidden" value="原创" name="flag" th:value="${blogDetail.flag}">
              <i class="dropdown icon"></i>
              <div class="text">原创</div>
              <div class="menu">
                <div class="item" data-value="原创">原创</div>
                <div class="item" data-value="转载">转载</div>
                <div class="item" data-value="翻译">翻译</div>
              </div>
            </div>
            <input type="text" name="title" placeholder="标题" th:value="${blogDetail.title}">
          </div>
        </div>

        <!-- 编写博客部分 -->
        <div class="required field">
          <div id="md-content" style="z-index: 1 !important;">
            <textarea style="display:none;" placeholder="博客内容" name="content" th:text="${blogDetail.content}"></textarea>
          </div>

        </div>

        <!-- 分类和标签 -->
        <div class="two fields">
          <div class="required field">
            <!-- action:可以是两个组件更好的连接在一起 -->
            <div class="ui left labeled action input">
              <label class="ui teal basic label">分类</label>
              <!-- selection：下拉框组件，div加selection是一种写法，另一种写法是直接写select -->
              <div class="ui fluid selection dropdown">
                <input type="hidden" name="typeId" th:value="${blogDetail.typeId}">
                <div class="default text">分类</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                  <div class="item" th:each="type : ${typeList}" th:data-value="${type.id}">[[${type.name}]]</div>
                </div>
              </div>
            </div>
          </div>

          <div class="field">
            <!-- action:可以是两个组件更好的连接在一起 -->
            <div class="ui left labeled action input">
              <label class="ui teal basic label">标签</label>
              <!-- selection：下拉框组件，div加selection是一种写法，另一种写法是直接写select -->
              <div class="ui fluid search selection dropdown multiple">
                <input type="hidden" name="tagIds" th:value="${blogDetail.tagIds}">
                <div class="default text">标签</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                  <div class="item" th:each="tag : ${tagList}" th:data-value="${tag.id}" th:text="${tag.name}"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

          <!-- 首图引用地址 -->
          <div class="required field">
            <div class="ui left labeled input">
              <label class="ui teal basic label">首图</label>
              <button type="button" class="layui-btn" id="uploadImg">
                <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
              <input type="hidden" name="firstPicture" id="firstPicture" th:value="${blogDetail.firstPicture}">

            </div>
            <div class="layui-upload-list" style="display: none" id="imageList">
              <img id="demo1" class="layui-upload-img" style="width: 150px;height: 100px;">
              <p id="demoText"></p>
            </div>
          </div>



        <!-- 推荐、转载声明、赞赏、评论 -->
        <div class="inline fields">
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="isRecommend" name="isRecommend" th:checked="${blogDetail.isRecommend} == 1 ? true : false"  class="hidden">
              <label for="isRecommend">推荐</label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="shareStatement" th:checked="${blogDetail.shareStatement} == 1 ? true : false" name="shareStatement" class="hidden">
              <label for="shareStatement">转载声明</label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="isAppreciate" th:checked="${blogDetail.isAppreciate} == 1 ? true : false" name="isAppreciate" class="hidden">
              <label for="isAppreciate">赞赏</label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="isComment" name="isComment" th:checked="${blogDetail.isComment} == 1 ? true : false" class="hidden">
              <label for="isComment">评论</label>
            </div>
          </div>
        </div>

        <!-- 校验错误信息 -->
        <div class="ui error message"></div>

        <div class="ui error message" th:unless="${#strings.isEmpty(message)}">
          <i class="close icon"></i>
          <div class="header">提示: </div>
          <p th:text="${message}">新增博客失败！</p>
        </div>

        <!-- 返回、保存、发布按钮 -->
        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
          <button th:if="${blogDetail.status} == 1" type="button" id="publish-btn" class="ui teal button">发布</button>
          <button type="button" id="update-btn" class="ui secondary button">修改</button>

        </div>

    </form>
  </div>
  </div>
  <br>
  <br>

  <!-- 底部footer -->
  <footer th:replace="_fragments :: footer"></footer>
<!--  <footer class="ui inverted vertical segment m-padded-td-massive">-->
<!--    <div class="ui center aligned container">-->
<!--      <div class="ui inverted divided stackable grid">-->
<!--        <div class="three wide column">-->
<!--          <div class="ui inverted link list">-->
<!--            <div class="item">-->
<!--              <img th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px;">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="four wide column">-->
<!--          <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>-->
<!--          <div class="ui inverted link list">-->
<!--            <a href="#" class="item">用户故事（User Story）</a>-->
<!--            <a href="#" class="item">用户故事（User Story）</a>-->
<!--            <a href="#" class="item">用户故事（User Story）</a>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="four wide column">-->
<!--          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>-->
<!--          <div class="ui inverted link list">-->
<!--            <a href="#" class="item">Email：2224264747@qq.com</a>-->
<!--            <a href="#" class="item">QQ：2224264747</a>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="five wide column">-->
<!--          <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>-->
<!--          <p m-text-thin m-text-spaced m-opacity-mini>这是我的个人博客、会分享关于编程、协作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="ui inverted section divider"></div>-->
<!--      <p m-text-thin m-text-spaced m-opacity-tiny>Copyright &copy; 2021-2021 srgstart All Rights Reserved V.3.1.5-->
<!--        豫ICP备2021009487号</p>-->
<!--    </div>-->
<!--  </footer>-->


  <!-- 引入jquery和semantic-ui的js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!-- 引入editormd的js -->
  <script th:src="@{/lib/editormd/editormd.min.js}"></script>
  <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
  <script>

  //  初始化markdown编辑器
    var contentEditor;
    $(function () {
      contentEditor = editormd("md-content", {
        width: "100%",
        height: 640,
        syncScrolling: "single",
        path: "/lib/editormd/lib/",
        emoji: true,
        taskList  : true,
        tocm      : true,       // 使用 [TOCM]
        tex       : true,       // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,       // 开启流程图支持，默认关闭
        sequenceDiagram: true,  // 开启时序/序列图支持，默认关闭
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/api/oss/fileUpload",  // 后端接收路径
      });
    });

  layui.use(['upload','element'], function(){
    var upload = layui.upload;
    var $ = layui.jquery;
    var element = layui.element;

    //执行实例
    var uploadInst = upload.render({
      elem: '#uploadImg' //绑定元素
      ,url: '/api/oss//fileUpload/file' //上传接口
      ,field: 'file'  // 与后台参数名对应
      ,accept: 'images'
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#imageList').css('display','block')
          $('#demo1').attr('src', result); //图片链接（base64）
        });

        element.progress('demo', '0%'); //进度条复位
        layer.msg('上传中', {icon: 16, time: 0});
      }
      ,done: function(res){
        //上传完毕回调
        $('[name="firstPicture"]').val(res.imgUrl);
        layer.msg("上传成功")
      }
      ,error: function(){
        //请求异常回调
        layer.msg("上传失败，请检查网络")
      }
    });
  });

  $(function () {
    if ($('#status').val() === '1') {
      layer.alert('当前博客为’草稿‘状态，请点击发布，让更多人看见吧')
    }
  })


    $('.menu.toggle').click(function () {
      // toggleClass：像开关一样的方法，如果开着就关了，如果关了，就开着
      $('.m-item').toggleClass('m-mobile-hide');
    });

    // 下拉框激活
    $('.ui.dropdown').dropdown({
      on: 'hover'
    });

  //修改按钮点击事件
  $("#update-btn").click(function () {

    if ($('#isRecommend').prop('checked')) {
      $('[name="isRecommend"]').val(1);
    } else {
      $('[name="isRecommend"]').val(0);
    }

    if ($('#shareStatement').prop('checked')) {
      $('[name="shareStatement"]').val(1);
    } else {
      $('[name="shareStatement"]').val(0);
    }

    if ($('#isAppreciate').prop('checked')) {
      $('[name="isAppreciate"]').val(1);
    } else {
      $('[name="isAppreciate"]').val(0);
    }

    if ($('#isComment').prop('checked')) {
      $('[name="isComment"]').val(1);
    } else {
      $('[name="isComment"]').val(0);
    }

    $("#blog-form").submit();
  })

  //发布按钮点击事件
  $("#publish-btn").click(function () {
    $("[name='status']").val(2)

    if ($('#isRecommend').prop('checked')) {
      $('[name="isRecommend"]').val(1);
    } else {
      $('[name="isRecommend"]').val(0);
    }

    if ($('#shareStatement').prop('checked')) {
      $('[name="shareStatement"]').val(1);
    } else {
      $('[name="shareStatement"]').val(0);
    }

    if ($('#isAppreciate').prop('checked')) {
      $('[name="isAppreciate"]').val(1);
    } else {
      $('[name="isAppreciate"]').val(0);
    }

    if ($('#isComment').prop('checked')) {
      $('[name="isComment"]').val(1);
    } else {
      $('[name="isComment"]').val(0);
    }

    $("#blog-form").submit();
  })

    // 表单验证 
    $('.ui.form').form({
      fields: {
        title: {
          identifier: 'title',
          rules: [{
            type: 'empty',
            prompt: '标题: 请输入博客标题'
          }]
        },
        content: {
          identifier: 'content',
          rules: [{
            type: 'empty',
            prompt: '标题: 请输入博客内容'
          }]
        },
        typeId: {
          identifier: 'typeId',
          rules: [{
            type: 'empty',
            prompt: '标题: 请输入博客分类'
          }]
        },
        firstPicture: {
          identifier: 'firstPicture',
          rules: [{
            type: 'empty',
            prompt: '标题: 请输入博客图片'
          }]
        },
      }
    })

  $("#logout").click(function () {
    $.getJSON('/logout',function (data) {
      if (data === 200) {
        // 注销成功，刷新当前页面
        location.reload();
      }
    })
  })
  </script>
</body>

</html>